<template>
  <div class="public">
    <div class="public-tiile">
      <h3>口碑品牌</h3>
      <span>口碑品牌买送好礼</span>
    </div>
    <div class="public-list">
      <div class="public-list-wrap" v-for="item in brandOneData" :key="item.id">
        <div class="public-list-wrap-title">
          <div class="public-list-wrap-title-log">
            <img
              src="https://img.alicdn.com/bao/uploaded///img.taobaocdn.com/tps/TB14WGENSzqK1RjSZFjXXblCFXa"
              alt=""
            />
          </div>
          <div class="public-list-wrap-title-name">
            {{ item.brandName }}
            <span>
              <span>{{ item.label }}</span>
            </span>
          </div>
          <div class="public-list-wrap-title-time">仅剩：2天</div>
        </div>
        <div class="public-list-wrap-banner">
          <div class="public-list-wrap-banner-info">
            <div class="msg1">{{ item.longProfit }}</div>
            <div class="msg2">{{ item.selfProfit }}</div>
            <div class="msg3">
              已售{{
                (item.recentSale =
                  item.recentSale > 10000
                    ? (item.recentSale / 10000).toFixed(1) + "万"
                    : item.recentSale)
              }}件
            </div>
          </div>
          <div class="public-list-wrap-banner-focus">
            {{
              (item.fansNum =
                item.fansNum > 10000
                  ? parseInt(item.fansNum / 10000) + "w"
                  : item.fansNum)
            }}人关注
          </div>
        </div>
        <div class="public-list-wrap-product">
          <div
            class="public-list-wrap-product-part"
            v-for="v in item.hotPush"
            :key="v.id"
          >
            <div class="product-img">
              <img class="log" :src="v?.smallLabel?.img" alt="" />
              <img class="pro-pic" :src="v.pic" alt="" />
              <div class="discount">{{ v.discount }}折</div>
            </div>
            <div class="product-info">
              <div class="price">
                <div class="log">￥</div>
                <div class="current-price">{{ v.jiage }}</div>
                <div class="pre-price">￥{{ v.yuanjia }}</div>
              </div>
              <div class="tag">
                <div
                  class="merchantTag"
                  v-for="(y, i) in v.goodsLabels"
                  :key="i"
                >
                  {{ y.val }}
                </div>
              </div>
              <div class="num">{{ v.xiaoliangText }}</div>
              <div class="sell_dear">{{ v.sellDear }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="public-hot">
      <div class="hot1">品牌热销</div>
      <div class="hot2">大家都在买的口碑好货</div>
    </div>
    <div class="public-board">
      <div>
        <van-icon name="diamond-o" />
        <span>大牌正品</span>
      </div>
      <div>
        <van-icon name="clock-o" />
        <span>10点更新</span>
      </div>
      <div>
        <van-icon name="discount" />
        <span>真实折扣</span>
      </div>
    </div>
    <BrandList />
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from "vue";
import { useStore } from "vuex";
import BrandList from "./index.vue";
export default defineComponent({
  setup() {
    const store = useStore();

    const brandOneData = computed(() => {
      return store.state.brand.brandOneData;
    });
    return {
      brandOneData,
    };
  },
  components: {
    BrandList,
  },
});
</script>

<style lang="stylus" scoped>
.public
    overflow hidden
    .public-tiile
        font-size .2rem
        color #fff
        text-align center
        margin-bottom .1rem
        h3
            margin-bottom 0
            margin-top .1rem
        span
            display block
            height .12rem
            font-size .12rem
    .public-list
        padding 0 .1rem
        .public-list-wrap
            background #fff
            border-radius .1rem
            padding-bottom .05rem
            margin-bottom .1rem
            .public-list-wrap-title
                color #333
                font-size .14rem
                padding 0 .1rem
                display flex
                align-items center
                .public-list-wrap-title-log
                    width .4rem
                    height .4rem
                    border-radius .05rem
                    margin-right .08rem
                    display flex
                    align-items center
                    background #fff
                    img
                        width 100%
                .public-list-wrap-title-name
                    font-size .16rem
                    line-height .22rem
                    span
                        height .17rem
                        font-size .1rem
                        line-height .16rem
                        z-index 1
                        left .03rem
                        top -.02rem
                        text-align center
                        display inline-block
                        span
                            background #f44
                            border-radius .04rem
                            padding  0 .06rem 0 .04rem
                            color #fff
                            display inline-block
                            height .16rem
                            line-height .16rem
                            transform scale(.9) translateX(-.02rem)
                .public-list-wrap-title-time
                    flex 1
                    text-align right
                    transform scale(.9)
            .public-list-wrap-banner
                height 1rem
                border-radius .1rem
                padding .10rem .16rem .18rem
                box-sizing border-box
                position relative
                z-index 1
                zoom 1
                background-size 100%
                margin 0 .10rem
                background-color #B9D3F0
                .public-list-wrap-banner-info
                    color #fff
                    .msg1
                        height .27rem
                        font-size .16rem
                        font-weight 500
                        line-height .27rem
                        margin-bottom .08rem
                        width 100%
                        overflow hidden
                        white-space nowrap
                        text-overflow ellipsis
                    .msg2
                        font-size .12rem
                        font-font-weight 400
                        line-height .12rem
                        height .12rem
                        margin-bottom .08rem
                    .msg3
                        height .12rem
                        font-size .12rem
                        font-weight 400
                        color #fff
                        line-height .12rem
                .public-list-wrap-banner-focus
                    font-size .1rem
                    transform scale(.9)
                    color #fff
                    line-height .19rem
                    position absolute
                    z-index 1
                    right 0
                    bottom 0
                    background linear-gradient(276deg,#ff1e2f 0,#e51698 100%)
                    border-radius .1rem .1rem .1rem 0
                    padding 0 .08rem
                    text-align center
            .public-list-wrap-product
                overflow auto
                display flex
                flex-wrap nowrap
                background #fff
                min-height 1.5rem
                border-radius 0 0 .1rem .1rem
                position relative
                z-index 1
                padding .1rem .1rem .05rem
                box-sizing border-box
                .public-list-wrap-product-part
                    margin-right .05rem
                    height 100%
                    .product-img
                        height 1.07rem
                        position relative
                        .log
                            width 1.07rem
                            position absolute
                            top .85rem
                        .pro-pic
                            width 1.07rem
                            border-radius .06rem
                        .discount
                            font-size .12rem
                            position absolute
                            right .03rem
                            bottom .02rem
                            color #fff
                            background #F9BC4F
                            border-radius .04rem
                            padding 0 .02rem
                    .product-info
                        padding .06rem 0 0 .04rem
                        .price
                            margin-bottom .04rem
                            display flex
                            align-items baseline
                            color #333
                            font-size .12rem
                            .log
                                font-size .14rem
                                color #ff3b32
                                line-height .14rem
                                margin-right .025rem
                            .current-price
                                font-size .16rem
                                color #ff3b32
                                line-height .17rem
                                margin-right .09rem
                            .pre-price
                                font-size .11rem
                                color #aaa
                                line-height .12rem
                                text-decoration line-through
                        .tag
                            display flex
                            min-height .13rem
                            .merchantTag
                                box-sizing border-box
                                border-radius .03rem
                                opacity .7
                                border 1px solid #fe3a33
                                color #fe3a33
                                text-align center
                                height .13rem
                                line-height .13rem
                                margin-right .05rem
                                padding 0 .05rem
                                font-size .1rem
                                transform scale(.9)
                        .num
                            height .14rem
                            font-size .1rem
                            transform scale(.9)
                            color #666
                            line-height .14rem
                            margin-top .04rem
                        .sell_dear
                            height .15rem
                            background rgba(245,166,35,.2)
                            border-radius .03rem
                            padding 0 .06rem
                            font-size .11rem
                            color #F57523
                            line-height .15rem
                            margin-top .05rem
    .public-hot
        margin-bottom .1rem
        text-align center
        .hot1
            height  .25rem
            font-size .18rem
            color #333
            line-height .25rem
            margin-bottom .03rem
        .hot2
            line-height .12rem
            color #9b9b9b
            font-size .12rem
            height .12rem
    .public-board
        height .33rem
        background #fff
        margin 0 .1rem .05rem
        display flex
        justify-content space-around
        align-items center
        padding 0 .3rem
        border-radius .1rem
        font-size .12rem
        color #FF3978
        div
            height .33rem
            line-height .38rem
</style>
